<template>
  <div class="graphitizing">
    <!-- 表格 -->
    <el-dialog
      title="石墨化装炉报告单"
      :append-to-body="true"
      :visible.sync="shoveCharge"
      :before-close="cancel"
      width="65%"
      center
    >
      <el-select
        v-model="zhuanglu"
        placeholder="请选择"
        size="small"
        style="
          position: absolute;
          top: 30px;
          left: 43px;
          width: 150px;
          border: 1px solid #1112;
        "
        @change="selectlz"
      >
        <el-option label="单炉" value="单炉"> </el-option>
        <el-option label="双炉" value="双炉"> </el-option>
      </el-select>
      <div class="card-table">
        <el-table
          @cell-click="cellClick(...arguments, 'stoveReport')"
          :row-class-name="tableRowClassName"
          :header-cell-style="getRowClass"
          cell-class-name="cellClassName"
          :data="form.stoveReport2"
          style="width: 100%; margin-top: -15px"
        >
          <el-table-column
            header-align="center"
            align="center"
            :label="zhuanglu"
          >
            <el-table-column
              header-align="center"
              align="center"
              prop="prop"
              label="A/B"
              width="100"
              v-if="zhuanglu === '双炉'"
            >
              <template slot-scope="{ row, column, $index }">
                <div class="tableSpan" v-if="$index === 0">A</div>
                <div class="tableSpan" v-else>B</div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="stoveNumber"
              label="炉号"
              width="120"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  clearable
                  class="tableInput"
                  v-focus
                  v-model="row.stoveNumber"
                  @blur="tabClickIndex = null"
                  placeholder=""
                >
                </el-input>
                <div v-else class="tableSpan">{{ row.stoveNumber }}</div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="stoveCode"
              label="总第炉数"
              width="120"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  clearable
                  class="tableInput"
                  v-focus
                  type="number"
                  v-model="row.stoveCode"
                  @blur="tabClickIndex = null"
                  placeholder=""
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.stoveCode === 0 ? null : row.stoveCode }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="customer"
              label="客户"
              width="width"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  class="tableInput"
                  clearable
                  v-focus
                  :controls="false"
                  @blur="tabClickIndex = null"
                  v-model="row.customer"
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.customer === 0 ? null : row.customer }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="specification"
              label="规格型号"
              width="width"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  class="tableInput"
                  clearable
                  v-focus
                  :controls="false"
                  @blur="tabClickIndex = null"
                  v-model="row.specification"
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.specification === 0 ? null : row.specification }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="totalStove"
              label="总装炉量（吨）"
              width="width"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  class="tableInput"
                  clearable
                  v-focus
                  :controls="false"
                  @blur="tabClickIndex = null"
                  v-model="row.totalStove"
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.totalStove === 0 ? null : row.totalStove }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="accessory"
              label="附属品（吨）"
              width="width"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  clearable
                  class="tableInput"
                  :controls="false"
                  v-focus
                  v-model="row.accessory"
                  @blur="tabClickIndex = null"
                  placeholder=""
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.accessory }}
                </div>
              </template>
            </el-table-column>

            <!-- <el-table-column
              header-align="center"
              align="center"
              prop="date"
              label="装炉日期"
              width="width"
            >
              <template slot-scope="{ row, column, $index }">
                <div style="display: flex">
                  <el-date-picker
                    v-model="row.date"
                    type="date"
                    style="border: white; flex: 1"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </div>
              </template>
            </el-table-column> -->

            <el-table-column
              header-align="center"
              align="center"
              prop="chargeRemarks"
              label="备注"
              width="250"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  clearable
                  class="tableInput"
                  v-focus
                  v-model="row.chargeRemarks"
                  @blur="tabClickIndex = null"
                  placeholder=""
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.chargeRemarks }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="card-table">
        <el-table
          @cell-click="cellClick(...arguments, 'stoveReport')"
          :row-class-name="tableRowClassName"
          :header-cell-style="getRowClass"
          cell-class-name="cellClassName"
          :data="form.stoveReport1"
          style="width: 100%; margin-top: -15px"
        >
          <el-table-column header-align="center" align="center" label="送电">
            <el-table-column
              header-align="center"
              align="center"
              prop="time"
              label="送电起止时间"
              width="380"
            >
              <template slot-scope="{ row, column, $index }">
                <div>
                  <el-date-picker
                    v-model="row.time"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd HH:mm:00"
                    value-format="yyyy-MM-dd HH:mm:00"
                  >
                  </el-date-picker>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="basicElectPrice"
              label="基础电费"
              width="width"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  clearable
                  class="tableInput"
                  v-focus
                  v-model="row.basicElectPrice"
                  @blur="tabClickIndex = null"
                  placeholder=""
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.basicElectPrice }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="powerRemarks"
              label="备注   "
              width="width"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  clearable
                  class="tableInput"
                  v-focus
                  v-model="row.powerRemarks"
                  @blur="tabClickIndex = null"
                  placeholder=""
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.powerRemarks }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="card-table">
        <el-table
          @cell-click="cellClick(...arguments, 'stoveReport')"
          :row-class-name="tableRowClassName"
          :header-cell-style="getRowClass"
          cell-class-name="cellClassName"
          :data="form.stoveReport3"
          style="width: 100%; margin-top: -20px"
        >
          <el-table-column header-align="center" align="center" label="质检">
            <el-table-column
              header-align="center"
              align="center"
              prop="prop"
              label="A/B"
              width="100"
              v-if="zhuanglu === '双炉'"
            >
              <template slot-scope="{ row, column, $index }">
                <div class="tableSpan" v-if="$index === 0">A</div>
                <div class="tableSpan" v-else>B</div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="passRate"
              label="合格率（%）"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  class="tableInput"
                  v-focus
                  :controls="false"
                  @blur="tabClickIndex = null"
                  v-model="row.passRate"
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.passRate }}
                </div>
              </template>
            </el-table-column>

            <el-table-column
              header-align="center"
              align="center"
              prop="qualityRemarks"
              label="备注 "
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  class="tableInput"
                  v-focus
                  :controls="false"
                  @blur="tabClickIndex = null"
                  v-model="row.qualityRemarks"
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.qualityRemarks === 0 ? null : row.qualityRemarks }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <PictureComponent
        :clearPics="clearPicture"
        content="装炉单、检查单、质检单"
        @uploadImages="uploadImage"
      ></PictureComponent>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updatedAvater, graReport } from "@/api/process.js";

import PictureComponent from "./pictureComponent.vue";
export default {
  name: "hisReport",
  components: { PictureComponent },
  data() {
    return {
      pageSize: 10, // 分页的页面大小
      totalCount: 0, // 分页的数据总数
      currentPage: 1, // 分页的当前页
      //开始
      zhuanglu: "单炉",
      clearPicture: false,
      shoveCharge: this.shoveCharges,
      form: {
        stoveReport2: [{}],
        stoveReport3: [{}],
        stoveReport1: [
          {
            time: [],
          },
        ],
      },
      fileName: {
        chargeStove: [],
      },
      tabClickIndex: null, // 列表当前点击的index
      fileList: [],
      flag: true,
      // 结束
    };
  },
  props: { shoveCharges: Boolean },
  emits: {
    UpshoveCharge: null, // 不进行校验
  },
  watch: {
    shoveCharges(n) {
      this.shoveCharge = n;
      if (n === false) {
        this.clearPicture = !this.clearPicture;
        this.cancel();
      }
    },
  },
  mounted() {},
  methods: {
    //开始
    uploadImage(fileList) {
      this.fileList = fileList;
    },
    //  上传装炉单
    async uploadDetailImg() {
      const formDatas = new FormData();
      this.fileList.forEach((element) => {
        formDatas.append("file", element.raw);
      });
      return updatedAvater(formDatas);
    },

    selectlz() {
      if (this.zhuanglu === "单炉") {
        this.form.stoveReport2 = [{}];
        this.form.stoveReport3 = [{}];
      } else {
        this.form.stoveReport2 = [{}, {}];
        this.form.stoveReport3 = [{}, {}];
      }
    },
    //取消按钮
    cancel() {
      this.form.stoveReport1 = [
        {
          time: [],
        },
      ];
      this.fileName.chargeStove = [];
      this.zhuanglu === "单炉"
        ? ((this.form.stoveReport2 = [{}]), (this.form.stoveReport3 = [{}]))
        : ((this.form.stoveReport2 = [{}, {}]),
          (this.form.stoveReport3 = [{}, {}]));

      this.$emit("UpshoveCharge");
    },
    //确定按钮
    async submitForm() {
      if (this.flag) {
        this.flag = false;
        let hd = await this.uploadDetailImg();
        this.shangchuan(hd.data.data);
        const { data } = await this.getdata();
        this.$emit("UpshoveCharges", data, "新增工单");
        this.flag = true;
      }
    },

    async getdata() {
      let obj = {};
      function handle(str) {
        return str ? str.toString() : str;
      }
      let a = this.form.stoveReport2[0];
      let b = this.form.stoveReport2[1];
      let qualityTest = {};
      if (this.zhuanglu == "双炉") {
        b.accessory = handle(b.accessory);
        b.totalStove = handle(b.totalStove);
        qualityTest.BStoveQuality = this.form.stoveReport3[1];
      }
      a.accessory = handle(a.accessory);
      a.totalStove = handle(a.totalStove);
      qualityTest.AStoveQuality = this.form.stoveReport3[0];
      obj = {
        graReportCharge: {
          aStove: a,
          bStove: b,
          fileName: this.fileName,
          isTwoStove: this.zhuanglu === "双炉" ? true : false,
        },
        powerList: {
          startTime: this.form.stoveReport1[0].time[0]
            ? this.form.stoveReport1[0].time[0]
            : "",
          endTime: this.form.stoveReport1[0].time[1]
            ? this.form.stoveReport1[0].time[1]
            : "",

          basicElectPrice: this.form.stoveReport1[0].basicElectPrice,
          powerRemarks: this.form.stoveReport1[0].powerRemarks,
        },
        qualityTest,
      };

      console.log(obj, "11111111111111111111");

      return graReport(obj);
    },
    message(data, name) {
      // console.log(data, "消息");
      if (data.code == 200) {
        this.$message({
          message: `${name}${data.message}`,
          type: "success",
        });
      } else {
        this.$message({
          message: `${name}${data.message}`,
          type: "warning",
        });
      }
    },
    shangchuan(hd1) {
      for (let key in hd1) {
        let obj = {};
        obj.key = `grareport_${key}`;
        obj.value = hd1[key];
        this.fileName.chargeStove.push(obj);
      }
    },
    //表格
    // 点击表格单元格时触发的方法
    cellClick(row, column, cell, event, table) {
      if (this.outStove || this.detial) {
        this.tabClickIndex = null;
      } else {
        this.tabClickIndex = row.index + column.label + table;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    // 修改表格头样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      const blon = rowIndex === 0 || rowIndex === 1;
      if (blon) {
        return "font-weight:200;background-color:#FBFBFF;color:black;";
      } else {
        return "";
      }
    },
    //表格
  },
};
</script>

<style  scoped>
.card-search {
  padding-bottom: 10px;
}
.tablebBtn .el-button {
  padding: 8px 7px;
}
.el-divider {
  margin: 30px 0;
}
.el-link {
  line-height: 1;
  padding-bottom: 12px;
}
.dialogTitle {
  padding: 18px;
  font-size: 18px;
}
.isTow {
   .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 2px 0 0 2px;
  }
   .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 2px 2px 0;
  }
   .is-active .el-radio-button__inner {
    background-color: $primary;
    border-color: $primary;
  }
}
.el-link {
  color: #409eff;
  font-size: 12px !important;
  padding-bottom: 0;
}
.tableSpan {
  padding: 7px;
}
.tableInput {
  width: 100%;
}
</style>
<style >
.cellClassName {
  cursor: pointer;
  padding: 0 !important;
  .cell {
    min-height: 40px;
    padding: 0 !important;
  }
}
.avatar {
  width: 150px;
  height: 145px;
  border-radius: 5%;
  float: left;
}
.images {
  width: 600px;
  height: 150px;
}
.el-input__inner {
  border: white;
}
</style>
